<style lang="less">
// 占位div样式
.left-div {
  visibility: hidden;
  border-style: solid;
  border-color: black;
  /* border-right-color: red; */
  border-color: transparent;
}

.room-details-content-wrapper {
  .ivu-card-body {
    padding: 0px;
  }

  /*对图片进行控制*/
  .room-teacher-cover {
    width: 100%;
    height: 240px;
    position: relative;

    .room-teacher-cover-img {
      width: inherit;
      height: inherit;
      border-radius: 4px 4px 0 0;
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;
    }
  }

  /*用户信息控制*/
  .room-teacher-info {
    min-height: 120px;
    position: relative;
    margin-left: 6px;

    .room-teacher-info-detail {
      margin-left: 20px;
      padding-top: 10px;

      .room-teacher-info-detail-name {
        display: inline-block;
        font-weight: 700;
        font-size: 20px;
        vertical-align: middle;
      }

      .room-teacher-info-detail-vip {
        display: inline-block;
        margin-left: 4px;
      }
      .room-teacher-info-detail-other {
        margin-top: 10px;
        .room-teacher-info-detail-other-item {
          display: inline-block;
          // margin-right: px;
        }
        .room-teacher-info-detail-other-item.desc {
          font-size: 12px;
          margin-right: 160px;
          margin-top: 10px;
          padding-bottom: 20px;
          text-align: justify;
        }
      }
    }
  }
  .my-tabs {
    .ivu-tabs-bar {
      .ivu-tabs-nav-container {
        .ivu-tabs-nav-wrap {
          .ivu-tabs-nav-scroll {
            .ivu-tabs-tab {
              width: 143%;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

.right-aside-wrapper {
  margin-left: 10px;
}

body {
  overflow: scroll;
}
</style>
<template>
  <div class="room-details">
    <Row>
      <Col span="2" class="left-div"></Col>
      <Col span="21">
        <Row>
          <Col span="19">
            <div class="room-details-content-wrapper">
              <Card>
                <!-- 答疑室图片 答疑室简介-->
                <div>
                  <div class="room-teacher-cover">
                    <div
                      class="room-teacher-cover-img"
                      :style="'background-image: url(&quot;'+RoomMainImg+'&quot;);'"
                    ></div>
                  </div>
                  <div class="room-teacher-info">
                    <div class="room-teacher-info-detail">
                      <div class="room-teacher-info-detail-name">
                        {{roomInfo.teacherName}}
                        <Tag v-if="roomInfo.status === 1" type="border" color="primary">已开通</Tag>
                        <Tag v-if="roomInfo.status === 2" type="border" color="error">已关闭</Tag>
                      </div>
                      <!-- <div class="room-teacher-info-detail-vip">
                        <span>钻石会员</span>
                      </div>-->
                      <div class="room-teacher-info-detail-other">
                        <div v-if="roomInfo.allData.professionList">
                          <span>专业：</span>&nbsp;
                          <div
                            v-for="pro in roomInfo.allData.professionList"
                            class="room-teacher-info-detail-other-item"
                          >
                            <span>
                              <Tag color="magenta">{{pro.proName}}</Tag>
                            </span>
                          </div>
                          <!---->
                        </div>
                        <div v-if="roomInfo.allData.courseList">
                          <span>课程：</span>&nbsp;
                          <div
                            v-for="course in roomInfo.allData.courseList"
                            class="room-teacher-info-detail-other-item"
                          >
                            <span>
                              <Tag color="green">{{course.courseName}}</Tag>
                            </span>
                          </div>
                          <!---->
                        </div>
                        <div class="room-teacher-info-detail-other-item block desc">
                          <span style="font-size: 14px;">简介：</span>
                          &nbsp;
                          {{roomInfo.desc}}
                        </div>
                      </div>
                    </div>
                    <div class="room-teacher-info-control">
                      <!---->
                    </div>
                  </div>
                  <!---->
                </div>
              </Card>

              <!-- 内容 -->
              <!-- <com-main-content></com-main-content> -->
              <div class="main-content-tabs-wrapper" style="margin-top:10px">
                <Tabs type="card" class="my-tabs">
                  <TabPane label="文件">
                    <page-file
                      ref="PageFileRef"
                      v-if="hackReset"
                      :roomId="roomId"
                      :ownInfo="ownInfo"
                      :roomInfo="roomInfo"
                    ></page-file>
                  </TabPane>
                  <TabPane label="问答">
                    <page-request
                      ref="PageRequestRef"
                      :roomId="roomId"
                      :ownInfo="ownInfo"
                      :roomInfo="roomInfo"
                    ></page-request>
                  </TabPane>
                  <TabPane label="学生">
                    <page-student
                      v-if="hackReset"
                      :roomId="roomId"
                      :ownInfo="ownInfo"
                      :roomInfo="roomInfo"
                    ></page-student>
                  </TabPane>
                </Tabs>
              </div>
            </div>
          </Col>
          <!-- 右边侧边栏 -->
          <Col span="5">
            <div class="right-aside-wrapper">
              <com-right-aside
                :roomInfo="roomInfo"
                :ownInfo="ownInfo"
                @file-upload-success="fileUploadSuccess"
                @update-data="init"
                @flush-request-data="flushRequestData"
                @com-flush="comFlush"
              ></com-right-aside>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getToken } from '@/libs/util'
import LoginForm from '_c/login-form'
import { mapGetters, mapActions } from 'vuex'

import RoomMainImg from '@/assets/images/room-main-img.jpg'

import PageFile from './PageFile.vue'
import PageStudent from './PageStudent.vue'
import PageRequest from './PageRequest.vue'
import ComRightAside from './ComRightAside.vue'

export default {
  components: {
    // ComMainContent,
    PageFile,
    PageStudent,
    PageRequest,
    ComRightAside,
    RoomMainImg
  },
  props: ['roomId'],
  data () {
    return {
      RoomMainImg,

      condition: {
        tid: this.roomId
      },
      roomInfo: {},
      ownInfo: {},
      hackReset: true
    }
  },
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),

    // 文件上传成功回调
    fileUploadSuccess () {
      // 通知文件页面 刷新数据
      this.$refs.PageFileRef.queryMethod()
    },

    // 获取答疑室数据
    queryRoomInfoById () {
      this.$httpUtil.asyncPost(
        'web/raroom/queryByCondition',
        {
          data: this.condition
        },
        res => {
          if (res.data.code === 200) {
            this.roomInfo = res.data.records[0]
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 获取答疑室的所属
    queryRoomOwn () {
      this.$httpUtil.asyncPost(
        'web/raroom/queryRoomOwn',
        { roomId: this.roomId },
        res => {
          if (res.data.code === 200) {
            this.ownInfo = res.data.records
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 强制组件刷新
    comFlush () {
      this.init()
      setTimeout(() => {
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
      }, 1000)
    },

    // // 刷新文件页面数据
    // flushFileData(){
    //   this.$refs.PageFileRef.init()
    // },

    // 刷新问题页面数据
    flushRequestData () {
      this.$refs.PageRequestRef.flushData()
    },

    // 页面初始化方法
    init () {
      this.queryRoomInfoById()
      this.queryRoomOwn()
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'getUserId', 'getUserName'])
  },
  watch: {},
  mounted () {
    this.init()
  }
}
</script>
